<template>
  <view class="create-artworks-container">
    <LoginWrap>
      <view class="create-artworks-header">
        <!-- #ifdef MP -->
        <u-navbar :is-back="false" background="transparent" :border-bottom="false"></u-navbar>
        <!-- #endif -->
        <!-- 创作者多个主页 -->
        <scroll-view class="create-artworks-header-scroll-view" scroll-x>
          <view class="create-artworks-header-scroll-view-content">
            <view
              v-for="(item, index) in author.authorList"
              :key="index"
              class="create-artworks-author-item"
              :class="{
                'create-artworks-author-item-active': author.authorCurrent === index
              }"
              @click="handleAuthorHomeAvatar(index)">
              <image
                :src="item.avatar || 'https://qiniu-res.jintianwang.cc/20221105222247-avatar.png'"
                mode="aspectFit"
                class="create-artworks-author-item-avatar"/>
              <!-- <image
                v-if="item.show_make === '2'"
                src="/static/icon/make-icon.png"
                mode="scaleToFill"
                class="create-artworks-author-item-type"/>
              <image
                v-else
                src="/static/icon/pic-icon.png"
                mode="scaleToFill"
                class="create-artworks-author-item-type"/> -->
            </view>
            <view class="create-artworks-author-item" @click="handleEditAuthorHome('create')" style="border: 0;">
              <image
                src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01xykpPu2BzNSa51rkU_!!1888948409.png"
                mode="aspectFit"
                class="create-artworks-author-item-addicon"
              />
            </view>
          </view>
        </scroll-view>
        <!-- 创作者信息 -->
        <view class="create-author-container">
          <view class="create-author-container-left">
            <view class="create-author-container-left-avatar">
              <image
                :src="author.authorList.length > 0 ? author.authorList[author.authorCurrent].avatar : 'https://qiniu-res.jintianwang.cc/20221105222247-avatar.png'"
                mode="aspectFit"
                class="create-author-container-left-image"
              />
              <view v-if="author.authorList.length > 0 && author.authorList[author.authorCurrent].audit_status !== 'success'" class="create-author-container-left-check-text">
                <text v-if="author.authorList[author.authorCurrent].audit_status === 'review'">审核中</text>
                <text v-else-if="author.authorList[author.authorCurrent].audit_status === 'fail' || author.authorList[author.authorCurrent].audit_status === 'reject'">违规</text>
              </view>
            </view>
            <view>
              <view class="create-author-container-left-name">
                <view>{{ author.authorList.length > 0 ? author.authorList[author.authorCurrent].name : '匿名' }}</view>
                <u-icon name="edit-pen-fill" color="#888" size="32" style="margin-left: 12rpx;" @click="handleEditAuthorHome()"></u-icon>
              </view>
              <view class="create-author-container-left-code">
                <text>口令：</text>
                <block v-if="author.authorList && author.authorList[author.authorCurrent] && author.authorList[author.authorCurrent].codeInfo.length > 0" >
                  <text v-for="(item, index) in author.authorList[author.authorCurrent].codeInfo" :key="item.id">
                    {{ item.code }}{{ (index + 1) !== author.authorList[author.authorCurrent].codeInfo.length ? ',' : '' }}
                  </text>
                </block>
                <text v-else>未设置口令</text>
              </view>
            </view>
          </view>
          <view class="create-author-container-right">
            <view class="create-author-container-icon-container" @click="handleSetPrice()">
              <image
                src="https://img.alicdn.com/imgextra/i4/1888948409/O1CN01TncdRi2BzNSd5DVV4_!!1888948409.jpg"
                mode="scaleToFill"
                class="create-author-container-right-icon"
              />
              <!-- <view class="icon-label">批量改价</view> -->
            </view>
            <view class="create-author-container-icon-container" @click="goCode()">
              <image
                src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01dBPI0x2BzNSgVw5BV_!!1888948409.jpg"
                mode="scaleToFill"
                class="create-author-container-right-icon"
              />
              <!-- <view class="icon-label">口令管理</view> -->
            </view>
            <view class="create-author-container-icon-container" @click="goAuditPage()">
              <image
                src="https://img.alicdn.com/imgextra/i4/1888948409/O1CN01GZLrf62BzNShFSos8_!!1888948409.jpg"
                mode="scaleToFill"
                class="create-author-container-right-icon"
              />
              <!-- <view class="icon-label">审核中心</view> -->
            </view>
            <!-- <view class="create-author-container-icon-container" @click="handleEditAuthorHome()">
              <image
                src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01r56BYg2BzNO1ZNApu_!!1888948409.png"
                mode="scaleToFill"
                class="create-author-container-right-icon"
              />
              <view class="icon-label">编辑</view>
            </view> -->
          </view>
        </view>
        <!-- 作品信息 -->
      </view>

      <!-- 图库类型 -->
      <block v-if="author.authorList && author.authorList.length > 0 && author.authorList[author.authorCurrent] && author.authorList[author.authorCurrent].show_make === '1'">
        <ArtworksContent
          ref="artworksContent"
          :author-info="author"
          @onChangeTabs="onChangeTabs"
          @onChangeAuthorHomeInfo="getAuthorInfoByUserId"></ArtworksContent>
      </block>
      <!-- 图库类型 -->

      <!-- 定制类型 -->
      <block v-else-if="author.authorList&& author.authorList.length > 0 && author.authorList[author.authorCurrent] && author.authorList[author.authorCurrent].show_make === '2'">
        <MakeArtworksContent
          ref="artworksContent"
          :author-info="author"
          @onChangeTabs="onChangeTabs"
          @onChangeAuthorHomeInfo="getAuthorInfoByUserId"
          :artworks-price-list="artworksPriceList"></MakeArtworksContent>
      </block>
      <!-- 定制类型 -->

    </LoginWrap>
    <!-- 创作者主页的添加和编辑 -->
    <AuthorHome
      :popup-show="author.authorHomePopupShow"
      :popup-title="author.popupTitle"
      :author-home-info="author.authorHomeInfo"
      :show-make="show_make"
      @success="getAuthorInfoByUserId"
      @close="closeAuthorHome"></AuthorHome>
    
    <!-- 批量改价格 -->
    <view class="batch-price">
      <u-popup v-model="showBatchChangePrice" border-radius="16" mode="center" width="630rpx" @close="closeBatchPrice">
        <view class="wechat-popup">
          <!-- 头部 -->
          <view class="header">
            <block v-if="currentSelectWeixinTabs === 'make_artworks'">
              <view class="header-title-container">
                <view class="title-text">修改分类价格</view>
                <view class="sub-title">分类里所有作品修改为统一价格</view>
              </view>
              <view class="change-code" @click="setDefaultPrice">
                <u-icon name="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01yrH4mS2BzNSdvubSQ_!!1888948409.png" color="#172B4D" size="32" style="margin-right: 2rpx;"></u-icon>
                <text>全部默认</text>
              </view>
            </block>
            <block v-else>
              <view class="header-title-container">
                <view class="title-text">修改公共素材价格</view>
                <view class="sub-title">同类型素材修改为统一价格</view>
              </view>
            </block>
          </view>
          <!-- 选择类型 -->
          <view class="select-weixin-tabs">
            <view
              class="tabs-item"
              :class="{
                'tabs-active-item': currentSelectWeixinTabs === 'make_artworks'
              }"
              @click="handleWeixinTabs('make_artworks')">定制素材</view>
            <view
              class="tabs-item"
              :class="{
                'tabs-active-item': currentSelectWeixinTabs === 'public_artworks'
              }"
              @click="handleWeixinTabs('public_artworks')">公共素材</view>
          </view>
          <!-- 选择挂载的类型 -->
          <view class="select-scroll">
            <scroll-view :scroll-y="true" class="scroll-container" lower-threshold="100" @scrolltolower="loadMore">
              <view v-if="currentSelectWeixinTabs == 'make_artworks'" class="image-content">
                <view
                  v-for="item in artworksPriceList"
                  :key="item.id"
                  class="image-type-item">
                  <view class="type-name-container">
                    <view class="name">{{ item.category_name }}</view>
                    <view class="default-price">默认价格：{{ item.default_price }}</view>
                  </view>
                  <view class="artworks-price-container">
                    <view class="price-input-container">
                      <input v-model="item.price" placeholder="价格" class="price-input" type="digit">
                    </view>
                    <view class="comfir-price" @click="sumbitPrice(item)">确认</view>
                  </view>
                </view>
              </view>
              <view v-else class="image-content">
                <image
                  src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01BZ8lrO2BzNRRSXweP_!!1888948409.png"
                  mode="scaleToFill"
                  class="batch-change-price"
                />
                <view class="setting-price" @click="setPublicArtworksPrice">前往修改价格</view>
              </view>
            </scroll-view>
          </view>
          <!-- 取消 -->
          <!-- <view class="wechat-popup-footer">
            <view class="close" @click="showBatchChangePrice = false">取消</view>
            <view class="cread-link" @click="handleCreateWeixinArticleUrl()">
              <text>确定提交</text>
            </view>
          </view> -->
        </view>
        <u-icon @click="showBatchChangePrice = false" name="close-circle" color="#fff" size="60" class="close-batch-price"></u-icon>
      </u-popup>
    </view>
  </view>
</template>

<script>
  import AuthorHome from '@/components/authorHome/authorHome.vue'; // 达人主页
  import LoginWrap from '@/components/loginWrap/loginWrap.vue';
  import ArtworksContent from './components/artworksContent.vue'
  import MakeArtworksContent from './components/makeArtworksContent.vue'
  import {
    authorInfoByUserId,
    makeChangePriceList,
    confirmArtworksPrice
  } from '@/api/artworks';

  import { mapGetters } from 'vuex';
  export default {
    components: {
      LoginWrap,
      AuthorHome,
      ArtworksContent,
      MakeArtworksContent
    },
    data() {
      return {
        author: {
          authorList: [], // 达人主页列表
          authorCurrent: 0, // 当前激活索引
          authorHomePopupShow: false, // 控制编辑弹窗
          popupTitle: '', // 弹窗标题
          authorHomeInfo: null, // 主页信息
        },
        artworksTypeAllListData: [],
        tabsCurrent: 0,
        showBatchChangePrice: false,
        currentSelectWeixinTabs: 'make_artworks',
        artworksPriceList: [],
        show_make: null
      }
    },
    watch: {
      '$store.state.artworksTypeAllListData': {
        immediate: true,
        handler(val) {
          if (val) {
            this.getArtworksTypeAllListData();
          }
        }
      }
    },
    onLoad(options) {
      this.show_make = options.show_make || '2';
    },
    onShow() {
      if (this.show_make) {
        this.getAuthorInfoByUserId();
      }
      // if (this.author && this.author.authorList && this.author.authorList.length > 0) {
      //   this.$refs.artworksContent.onChangeAuthorHome();
      // }
    },
    methods: {

      // 确定价格
      sumbitPrice(itemData) {
        if (itemData && parseFloat(itemData.price || 0) > 0) {

          if (itemData.price > 9.99) {
            uni.showToast({
              icon: 'none',
              title: "价格不能超过10元"
            })
            return;
          }

          if (itemData.price < 1) {
            uni.showToast({
              icon: 'none',
              title: "最低是1.00元"
            })
            return;
          }

          let author_id = this.author.authorList[this.author.authorCurrent].id;
          confirmArtworksPrice({
            author_id,
            artworks_type_id: itemData.id,
            price: itemData.price
          }).then(result => {
            if (result && result.code === 200) {
              // this.showBatchChangePrice = false;
              uni.showToast({
                icon: 'none',
                title: "修改成功"
              })
            }
          })
        } else {
          uni.showToast({
            icon: 'none',
            title: "请输入价格"
          })
        }
      },

      // 设置默认价格
      setDefaultPrice() {
        let priceList = this.artworksPriceList;
        priceList.forEach(item => {
          item.price = item.default_price;
        })
      },

      // 关闭修改价格弹窗
      closeBatchPrice() {
        this.showBatchChangePrice = false;
        this.getMakePriceList();
        this.$refs.artworksContent.onChangeAuthorHome();
      },

      // 获取价格列表
      getMakePriceList() {
        let author_id = this.author.authorList[this.author.authorCurrent].id;
        makeChangePriceList({
          author_id
        }).then(result => {
          if (result && result.data) {
            this.artworksPriceList = result.data;
          }
        })
      },

      // 批量改价定制
      handleWeixinTabs(type) {
        this.currentSelectWeixinTabs = type;
      },

      // 监听改变分类
      onChangeTabs(index) {
        this.tabsCurrent = index - 1;
      },

      // 作品分类
      getArtworksTypeAllListData() {
        const artworksTypeAllListData = this.$store.state.artworksTypeAllListData;
        this.artworksTypeAllListData = artworksTypeAllListData;
      },

      // 根据用户id获取全部的达人主页信息
      getAuthorInfoByUserId() {
        authorInfoByUserId({
          show_make: ''
        }).then(result => {
          if (result && result.data && result.data.length > 0) {
            this.author.authorList = result.data;
            uni.$emit('onChangeAuthorHome');
            this.getMakePriceList();
          } else if (this.author.authorList.length === 0) {
            this.handleEditAuthorHome('create');
          } else {
            this.author.authorList = [];
          }
        })
      },

      // 添加、编辑创作者主页 type edit create
      handleEditAuthorHome(type) {
        if (type === 'create') {
          this.author.popupTitle = '新建主页';
          this.author.authorHomeInfo = null;
          this.author.authorHomePopupShow = true;
        } else {
          this.author.popupTitle = '修改主页';
          this.author.authorHomeInfo = this.author.authorList[this.author.authorCurrent];
          this.author.authorHomePopupShow = true;
        }
      },

      // 关闭创作者主页弹窗
      closeAuthorHome() {
        this.author.authorHomePopupShow = false;
        this.author.authorHomeInfo = null;
        if (this.author.authorList.length === 0) {
          uni.switchTab({ url: '/pages/creativeCenter/index' });
        }
      },

      // 点击达人主页头像
      handleAuthorHomeAvatar(index) {
        this.author.authorCurrent = index;
        const codeInfo = this.author.authorList[index].codeInfo;
        // uni.$emit('onChangeAuthorHome');
        if (codeInfo.length === 0) {
          uni.showModal({
            title: '温馨提示',
            content: `主页暂未绑定搜索码，用户将无法搜索到当前主页。`,
            confirmText: '前往设置',
            cancelText: '取消',
            confirmColor: '#56d39d',
            success: ({ confirm, cancel }) => {
              if (confirm) {
                this.goCode();
              }
            }
          })
        }
      },

      // 前往code
      goCode() {
        const show_make = this.author.authorList[this.author.authorCurrent].show_make; // 主页id
        if (show_make === '1') {
          uni.navigateTo({
            url: '/pages/authorCode/authorCode'
          })
        } else {
          uni.navigateTo({
            url: '/pages/authorCode/makeAuthorCode'
          })
        }
      },

      // 前往审核
      goAuditPage() {
        const author_id = this.author.authorList[this.author.authorCurrent].id; // 主页id
        const show_make = this.author.authorList[this.author.authorCurrent].show_make; // 主页id
        const type = this.tabsCurrent === -1 ? '' : this.artworksTypeAllListData[this.tabsCurrent].id; // 类型id
        if (show_make === '1') {
          uni.navigateTo({
            url: `/pages/artworks/auditPage?author_id=${author_id}&type=${type}&tabsCurrent=${this.tabsCurrent}`
          })
        } else {
          uni.navigateTo({
            url: `/pages/artworks/auditPage?author_id=${author_id}&type=10&tabsCurrent=${this.tabsCurrent}`
          })
        }
        
      },

      // 设置价格
      handleSetPrice() {
        const show_make = this.author.authorList[this.author.authorCurrent].show_make; // 主页类型
        if (show_make === '2') {
          this.showBatchChangePrice = true;
        } else {
          this.setPublicArtworksPrice();
        }
      },

      // 设置公共素材价格
      setPublicArtworksPrice() {
        const author_id = this.author.authorList[this.author.authorCurrent].id; // 主页id
        const show_make = this.author.authorList[this.author.authorCurrent].show_make; // 主页类型
        // 图库
        if (author_id) {
          uni.navigateTo({
            url: `/pages/artworks/setPrice?author_id=${author_id}&tabsCurrent=${this.tabsCurrent}`
          })
        } else {
          uni.showToast({
            title: "请先添加主页，在设置价格"
          })
        }
      }
    },
    onShareAppMessage() {},
    onPullDownRefresh() {
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 2 * 1000);
      this.getAuthorInfoByUserId();
    },
    // 下拉加载
    onReachBottom() {
      uni.$emit('onReachBottom');
    },
  }
</script>

<style lang="scss">
  .create{

    &-artworks{

      &-header{
        padding: 40rpx 32rpx;
        width: 100%;
        // height: 300rpx;
        background: url('https://img.alicdn.com/imgextra/i3/1888948409/O1CN015eeuoR2BzNSd1J13Z_!!1888948409.png') no-repeat;
        background-size: cover;

        &-scroll-view{
          width: 100%;

          &-content{
            width: 100%;
            display: flex;
            align-items: center;
          }
        }
      }

      &-author-item{
        overflow: hidden;
        position: relative;
        display: flex;
        border-radius: 50%;
        min-width: 80rpx;
        min-height: 80rpx;
        margin-right: 12rpx;
        border: 4rpx solid #fff;

        &-avatar{
          width: 72rpx;
          height: 72rpx;
          border-radius: 50%;
          font-size: 16rpx;
        }

        &-addicon{
          width: 72rpx;
          height: 72rpx;
          border-radius: 50%;
          border: 4rpx solid $uni-color-primary;
        }

        &-active {
          border-color: $uni-color-primary;
        }

        &-type{
          width: 72rpx;
          height: 34rpx;
          position: absolute;
          left: 0;
          right: 0;
          margin: auto;
          bottom: 0;
        }
      }
    }

    &-author-container{
      display: flex;
      padding-bottom: 40rpx;
      margin-top: 40rpx;
      color: #333;
      font-size: 28rpx;
      align-items: center;

      &-left{
        display: flex;
        align-items: center;

        &-avatar{
          position: relative;
          border-radius: 50%;
          width: 80rpx;
          height: 80rpx;
          border: 4rpx solid #fff;
          margin-right: 16rpx;
          overflow: hidden;
          overflow: hidden;
        }

        &-check-text{
          position: absolute;
          width: 100%;
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          font-size: 20rpx;
          color: #fff;
          top: 0;
          bottom: 0;
          margin: auto;
          background: rgba($color: #000000, $alpha: .3);
        }

        &-image{
          position: relative;
          width: 72rpx;
          height: 72rpx;
          font-size: 16rpx;
          box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(0,0,0,0.15);
        }
        
        &-name{
          width: 300rpx;
          font-weight: 500;
          color: #333;
          font-size: 28rpx;
          display: flex;
        }
        &-code{
          width: 300rpx;
          font-size: 20rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          color: #888;
        }
      }

      &-icon-container {
        margin-left: 12rpx;
        // border-radius: 50%;
        border-radius: 12rpx;
        background: rgba(255, 255, 255, 1);
        width: 74rpx;
        height: 74rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        overflow: hidden;
        box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(0,0,0,0.15);
      }

      .icon-label{
        font-size: 20rpx;
        color: #56d39d;
        width: 100%;
        text-align: center;
      }

      &-right{
        display: flex;
        flex: 1;
        margin-left: 24rpx;
        justify-content: space-between;

        &-icon{
          width: 74rpx;
          height: 74rpx;
          float: left;
        }
      }
    }
  }

  .wechat-popup{
    width: 630rpx;
    height: 950rpx;
    overflow: hidden;
    background-image: url(https://img.alicdn.com/imgextra/i4/1888948409/O1CN01YGP2Wf2BzNSgEbeuJ_!!1888948409.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;

    .header{
      width: 100%;
      height: 112rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12rpx 0 12rpx 32rpx;

      .header-title-container{
        display: flex;
        flex-wrap: wrap;
      }

      .title-text{
        width: 100%;
        font-size: 32rpx;
        font-weight: bold;
        color: #172B4D;
      }

      .sub-title{
        font-size: 24rpx;
        color: #888;
      }

      .change-code{
        display: flex;
        width: 190rpx;
        height: 100%;
        font-size: 26rpx;
        color: #172B4D;
        justify-content: center;
        align-items: center;
        margin-right: 32rpx;
        background-color: #e0eefc;
        font-size: 24rpx;
        border-radius: 16rpx;
      }
    }

    .select-weixin-tabs{
      margin: 28rpx auto 0;
      width: 570rpx;
      height: 68rpx;
      background: #e0eefc;
      border-radius: 10rpx;
      position: relative;
      display: flex;
      align-items: center;

      .tabs-item{
        flex: 1;
        height: 68rpx;
        line-height: 68rpx;
        text-align: center;
      }

      .tabs-active-item{
        background-color: $uni-color-primary;
        color: #fff;
        border-radius: 10rpx;
      }
    }

    .select-scroll{
      width: 100%;
      height: 680rpx;
      overflow: hidden;
      margin-top: 24rpx;
    }

    .select-scroll2{
      height: 690rpx;
    }

    .scroll-container{
      width: 100%;
      height: 680rpx;
      overflow: hidden;

      .image-content{
        padding: 0 32rpx;

        .image-type-item{
          width: 100%;
          background: #fafafc;
          border-radius: 16rpx;
          margin-bottom: 18rpx;
          padding: 24rpx;
          transition: .1s;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .checkbox{
          width: 48rpx;
          height: 48rpx;
        }

        .type-name-container{
          display: flex;
          flex: 1;
          flex-wrap: wrap;

          .name{
            width: 100%;
            font-size: 32rpx;
            font-weight: bold;
            color: #172B4D;
            margin-bottom: 12rpx;
          }

          .default-price{
            width: 100%;
            font-size: 24rpx;
            color: #888;
          }
        }

        .artworks-price-container{
          width: 280rpx;
          height: 86rpx;
          background-color: #e0eefc;
          border-radius: 16rpx;
          overflow: hidden;
          display: flex;
          align-items: center;

          .price-input-container{
            flex: 1;

            .price-input{
              color: $uni-color-primary;
              text-align: center;
              font-size: 32rpx;
            }
          }

          .comfir-price{
            flex: 1;
            height: 86rpx;
            background-color: $uni-color-primary;
            color: #fff;
            text-align: center;
            line-height: 86rpx;
            font-size: 32rpx;
          }
        }
      }

      .batch-change-price{
        width: 480rpx;
        height: 480rpx;
        display: block;
        margin: 32rpx auto;
      }

      .setting-price{
        width: 480rpx;
        height: 88rpx;
        border-radius: 44rpx;
        background-color: #f3f7fb;
        border: 2rpx solid $uni-color-primary;
        color: #172B4D;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        margin: auto;
        font-weight: bold;
      }
    }
  }

  .close-batch-price{
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12rpx auto;
  }
  
  .create-artworks-container .batch-price ::v-deep .u-mode-center-box{
    background-color: transparent;
  }
</style>
